<template>
  <div>
    <el-container>
      <!-- 顶部 -->
      <el-header style="height: 80px">
        <div class="top">
          <div class="h-left">
            <div class="h-l-t">
              <img src="../assets/logo.png" alt="重庆邮电大学" />
              <div class="title">重庆邮电大学</div>
            </div>
            <div class="h-l-b">全国中小学生研学实践教育基地</div>
          </div>
          <div class="h-right">
            <ul>
              <li
                id="homes1"
                :class="flag === 1 ? 'active' : ''"
                @click="change1"
              >
                首页
              </li>
              <li
                id="intro1"
                :class="flag === 2 ? 'active' : ''"
                @click="change2"
              >
                大赛简介
              </li>
              <li
                id="classy1"
                :class="flag === 3 ? 'active' : ''"
                @click="change3"
              >
                大赛分类
              </li>
              <li
                id="explain1"
                :class="flag === 4 ? 'active' : ''"
                @click="change4"
              >
                大赛公告
              </li>
              <li
                id="introduce1"
                :class="flag === 5 ? 'active' : ''"
                @click="change5"
              >
                基地介绍
              </li>
              <li
                id="foot1"
                :class="flag === 6 ? 'active' : ''"
                @click="change6"
              >
                联系我们
              </li>
            </ul>
          </div>
        </div>
      </el-header>
      <el-main>
        <!-- 登录页面 -->
        <div id="homes">
          <div class="banner-left">
            <div class="banner-l-t">全国中小学生研学实践教育基地</div>
            <div class="banner-l-b">
              <img src="../assets/banner.png" alt="" />
            </div>
          </div>
          <div class="banner-right">
            <div class="login">
              <div class="login-top">
                <p :class="flag2 === 1 ? 'tx' : ''" @click="zh_log">账号登录</p>
                <p :class="flag2 === 2 ? 'tx' : ''" @click="dx_log">
                  短信验证登录
                </p>
              </div>
              <div class="login-main">
                <div class="ipt1" v-show="flag2 === 1">
                  <img src="../assets/phone.png" alt="" />
                  <input type="text" placeholder="请输入手机号" />
                </div>
                <div class="ipt2" v-show="flag2 === 1">
                  <img src="../assets/secret.png" alt="" />
                  <input type="password" placeholder="请输入密码" />
                </div>
                <div class="ipt3" v-show="flag2 === 2">
                  <img src="../assets/phone.png" alt="" />
                  <input type="text" placeholder="请输入手机号" />
                </div>
                <div class="ipt4" v-show="flag2 === 2">
                  <img src="../assets/secret.png" alt="" />
                  <input type="password" placeholder="验证码" />
                  <button>发送验证码</button>
                </div>
                <button>登录</button>
                <div class="sign" @click="sign">注册</div>
              </div>
            </div>
          </div>
        </div>

        <!-- 作品介绍部分 -->
        <div id="productions">
          <div class="productions-introduce">
            <h3>优秀作品</h3>
          </div>
          <div class="production">
            <div class="swp">
              <swiper class="swiper-wrapper" :options="swiperOption">
                <swiperSlide
                  class="swiper-slide"
                  v-for="item in studentsList"
                  :key="item.index"
                >
                  <div class="pro_pic">
                    <img src="../assets/pro-logo.png" alt="" />
                  </div>
                  <h3>{{ "《" + item.work_name + "》" }}</h3>
                  <div class="pro_b">
                    <div class="bot-name">
                      <img src="../assets/people.png" alt="" />
                      <h4>{{ item.name }}</h4>
                    </div>
                    <div class="bot-school">
                      <div class="school">{{ item.school }}</div>
                      <span>|</span>
                      <div class="pro-type">{{ item.type }}</div>
                    </div>
                  </div>
                </swiperSlide>
              </swiper>
            </div>
          </div>
        </div>

        <!-- 大赛简介 -->
        <div id="intro">
          <div class="intro">
            <div class="intro-content">
              <div class="intro-title">
                <p>introduction</p>
                <p class="title2">to the competition</p>
                <h3>大赛简介</h3>
              </div>
              <img src="../assets/pic.png" alt="" />
              <el-tabs value="first" @tab-click="handleClick" class="tab">
                <el-tab-pane
                  class="tabs"
                  label="大赛简介"
                  name="first"
                  v-html="introContent"
                  ><p>{{ introContent }}</p></el-tab-pane
                >
                <el-tab-pane label="大赛目的" name="second"
                  ><p class="second">
                    通过青少年科学素养大赛，让参赛选手通过比赛的方式来了解目前的前沿科学技术，调动参赛者学习科学文化的热情，让参赛者们在暑假中玩中带学。此外，更是希望参赛者们通过比赛收获知识，收获快乐，激发思维，更加激发青少年学科学、爱科学、用科学的热情，鼓励青少年勇当科技创新先锋，激发创新潜能。让更多创新型人才脱颖而出，为加快建设世界科技强国培养更多领军人物。
                  </p></el-tab-pane
                >
                <el-tab-pane label="组织机构" name="third">
                  <p>重庆邮电大学</p>
                  <p>重庆市工业互联网联盟</p>
                </el-tab-pane>
              </el-tabs>
            </div>
          </div>
        </div>

        <!-- 大赛分类 -->
        <div id="classy">
          <div class="classy">
            <div class="content">
              <div class="title">
                <h3>大赛分类</h3>
              </div>
              <div class="contentList">
                <ul>
                  <li>
                    <img src="../assets/fl_1.png" alt="" @click="classfy1" />
                    <p>科普活动征文比赛</p>
                  </li>
                  <li>
                    <img src="../assets/fl_2.png" alt="" @click="classfy2" />
                    <p>科技作品</p>
                  </li>
                  <li>
                    <img src="../assets/fl_1.png" alt="" @click="classfy3" />
                    <p>科普画图</p>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>

        <!-- 大赛公告 -->
        <div id="explain">
          <div class="explain">
            <div class="explain-content">
              <div class="explain-title">大赛公告</div>
              <ul class="e-tab">
                <!-- 通过判断实现效果 -->
                <li :class="f === 1 ? 'act' : ''" @click="acti1">预赛</li>
                <li :class="f === 2 ? 'act' : ''" @click="acti2">晋级赛</li>
                <li :class="f === 3 ? 'act' : ''" @click="acti3">决赛</li>
              </ul>
              <div class="e-tab-content" v-show="f === 1">
                <div class="tab-content">
                  <ul class="tab-contentList">
                    <a
                      href="http://repair-h.oss-cn-shenzhen.aliyuncs.com/article/%E5%8F%82%E8%B5%9B%E9%80%9A%E7%9F%A5.pdf"
                      target="_blank"
                    >
                      <li class="content-list">
                        <img src="../assets/wenjian.png" alt="" />
                        <p>
                          重庆邮电大学教育部全国中小学生研学实践教育基地科普竞赛
                        </p>
                      </li>
                    </a>
                    <a
                      target="_blank"
                      href="http://cycompetition.oss-cn-shanghai.aliyuncs.com/article/%E5%BB%B6%E8%BF%9F%E9%80%9A%E7%9F%A5.pdf"
                    >
                      <li class="content-list">
                        <img src="../assets/wenjian.png" alt="" />
                        <p>赛事延迟通知</p>
                      </li>
                    </a>
                  </ul>
                  <div class="pagination">
                    <el-pagination
                      @current-change="handleCurrentChange"
                      :current-page.sync="noticeList.page"
                      layout="total, prev, pager, next"
                      :total="count"
                      background
                    >
                    </el-pagination>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 基地介绍 -->
        <div id="introduce">
          <div class="introduce">
            <div class="introduce-content">
              <div class="introduce-title">
                <h3>基地介绍</h3>
              </div>
              <div class="image_video">
                <video controls>
                  <source
                    src="https://repair-h.oss-cn-shenzhen.aliyuncs.com/%E9%87%8D%E5%BA%86%E9%82%AE%E7%94%B5%E5%A4%A7%E5%AD%A6%E6%97%A0%E4%BA%BA%E6%9C%BACUT1.m4v"
                    type="video/mp4"
                  />
                </video>
              </div>
              <div v-html="introduceList.content">
                {{ introduceList.content }}
              </div>
            </div>
          </div>
        </div>
      </el-main>
      <!-- foot部分 -->
      <el-footer>
        <div id="foot">
          <div class="foot">
            <div class="foot_content">
              <div class="foot_logo">
                <div class="logo_top">
                  <img src="../assets/logo.png" alt="重庆大学logo" />
                </div>
                <div class="logo_bot">
                  <img src="../assets/logo_title.png" alt="重庆邮电大学" />
                </div>
              </div>
              <div class="foot_content">
                <ul>
                  <li>
                    <div>联系邮箱</div>
                    <div>：kpjscqupt@sina.com</div>
                  </li>
                  <li>
                    <div>地址</div>
                    <div>：重庆市南岸区崇文路2号重庆邮电大学</div>
                  </li>
                </ul>
              </div>
              <div class="foot_wechart">
                <div class="wechart">
                  <img src="../assets/weChart.png" alt="" />
                </div>
                <p>加入QQ群及时了解动态</p>
              </div>
            </div>
          </div>
        </div>
      </el-footer>
    </el-container>
    <el-dialog
      title="科普活动征文比赛"
      :visible.sync="dialogVisible1"
      width="70%"
    >
      <div v-html="classcontent1">{{ classcontent1 }}</div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible1 = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <el-dialog
      title="科技作品比赛简介"
      :visible.sync="dialogVisible2"
      width="70%"
    >
      <div v-html="classcontent2">{{ classcontent2 }}</div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible2 = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <el-dialog
      title="科普画图比赛简介"
      :visible.sync="dialogVisible3"
      width="70%"
    >
      <div v-html="classcontent3">{{ classcontent3 }}</div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible3 = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
// Import Swiper Vue.js components
import { Swiper, SwiperSlide } from "vue-awesome-swiper";

// Import Swiper styles
import "swiper/swiper.scss";

import "swiper/components/effect-coverflow/effect-coverflow.min.css";
import "swiper/components/pagination/pagination.min.css";

// import "./style.css";
// import Swiper core and required modules
import SwiperCore, { Autoplay, EffectCoverflow, Pagination } from "swiper/core";

// install Swiper modules
SwiperCore.use([Autoplay, EffectCoverflow, Pagination]);
import $ from 'jquery'

$(document).ready(function () {
  $("#homes1").click(function () {
    $("html, body").animate(
      {
        scrollTop: $("#homes").offset().top,
      },
      {
        duration: 500,
        easing: "swing",
      }
    );
    return false;
  });
  $("#intro1").click(function () {
    $("html, body").animate(
      {
        scrollTop: $("#intro").offset().top,
      },
      {
        duration: 500,
        easing: "swing",
      }
    );
    return false;
  });
  $("#classy1").click(function () {
    $("html, body").animate(
      {
        scrollTop: $("#classy").offset().top,
      },
      {
        duration: 500,
        easing: "swing",
      }
    );
    return false;
  });
  $("#explain1").click(function () {
    $("html, body").animate(
      {
        scrollTop: $("#explain").offset().top,
      },
      {
        duration: 500,
        easing: "swing",
      }
    );
    return false;
  });
  $("#introduce1").click(function () {
    $("html, body").animate(
      {
        scrollTop: $("#introduce").offset().top,
      },
      {
        duration: 500,
        easing: "swing",
      }
    );
    return false;
  });
  $("#foot1").click(function () {
    $("html, body").animate(
      {
        scrollTop: $("#foot").offset().top,
      },
      {
        duration: 500,
        easing: "swing",
      }
    );
    return false;
  });
});

export default {
  data() {
    return {
      action: "ing",
      schedule_id: 0,
      page: 1,
      limit: 5,
      type: 4,
      class: "",
      flag: 1,
      flag2: 1,
      f: 1,
      count: 0,
      noticeList: [],
      articleList: [],
      introduceList: [],
      studentsList: [],
      introContent: "",
      classfyList1: [],
      classcontent1: "",
      classfyList2: [],
      classcontent2: "",
      classfyList3: [],
      classcontent3: "",
      // xid: 0,
      dialogVisible1: false,
      dialogVisible2: false,
      dialogVisible3: false,
      swiperOption: {
        effect: "coverflow",
        grabCursor: true,
        centeredSlides: true,
        slidesPerView: "auto",
        autoplay: {
          delay: 2500,
          disableOnInteraction: false,
        },
        coverflowEffect: {
          rotate: 0,
          stretch: 0,
          depth: 100,
          modifier: 1,
          slideShadows: false,
        },
        // Lazy: {
        //   preloaderClass: "production",
        // },
      },
    };
  },
  components: {
    Swiper,
    SwiperSlide,
  },
  watch: {},
  created() {
    this.getinfoList();
  },
  methods: {
    async getinfoList() {
      const { data: res1 } = await this.$http.get("0", {
        params: { action: this.action },
      });
      console.log(res1);
      const { data: res2 } = await this.$http.get("n_article", {
        params: {
          schedule_id: this.schedule_id,
          page: this.page,
          limit: this.limit,
          type: this.type,
        },
      });
      console.log(res2);
      this.noticeList = res2.result.data;
      // console.log(this.noticeList)
      this.count = res2.result.count;
      // console.log(this.count)
      const { data: res3 } = await this.$http.get("n_article", {
        params: {
          type: 0,
          page: 1,
          limit: 10,
        },
      });
      console.log(res3);
      this.introContent = res3.result.data[0].content;
      // console.log(this.introContent)
      const { data: res4 } = await this.$http.get("n_article", {
        params: {
          type: 3,
          page: 1,
          limit: 10,
        },
      });
      console.log(res4);
      this.introduceList = res4.result.data[0];
      console.log(this.introduceList);
      const { data: res5 } = await this.$http.get("n_excellence", {
        params: {
          competition_id: "",
          page: 1,
          limit: 100,
        },
      });
      console.log(res5);
      this.studentsList = res5.result;
      for (var index of this.studentsList) {
        // console.log(index)
        this.articleList.push(index.article);
      }
      console.log(this.articleList);
      console.log(this.studentsList);
    },
    change1() {
      this.flag = 1;
      this.getinfoList();
    },
    change2() {
      this.flag = 2;
      this.getinfoList();
    },
    change3() {
      this.flag = 3;
      this.getinfoList();
    },
    change4() {
      this.flag = 4;
      this.getinfoList();
    },
    change5() {
      this.flag = 5;
      this.getinfoList();
    },
    change6() {
      this.flag = 6;
      this.getinfoList();
    },
    sign() {
      this.$router.push("/register");
    },
    zh_log() {
      this.flag2 = 1;
      this.getinfoList();
    },
    dx_log() {
      this.flag2 = 2;
      this.getinfoList();
    },
    acti1() {
      this.f = 1;
      this.getinfoList();
    },
    acti2() {
      this.f = 2;
      this.getinfoList();
    },
    acti3() {
      this.f = 3;
      this.getinfoList();
    },
    // getProductionInfo(id) {
    // console.log(xid);
    //   this.$router.push({ path: "n_excellence", query: { id: id } });
    // },
    handleClick() {},
    async classfy1() {
      const { data: res } = await this.$http.get("n_article", {
        params: {
          type: 1,
          page: 1,
          limit: 10,
        },
      });
      console.log(res);
      this.classfyList1 = res.result.data;
      this.classcontent1 = res.result.data[0].content;
      // console.log(this.classfyList1)
      // console.log(this.classcontent1)
      this.dialogVisible1 = true;
    },
    async classfy2() {
      const { data: res } = await this.$http.get("n_article", {
        params: {
          type: 1,
          page: 1,
          limit: 10,
        },
      });
      console.log(res);
      this.classfyList2 = res.result.data;
      this.classcontent2 = res.result.data[1].content;
      // console.log(this.classcontent2)
      // console.log(this.classfyList2)
      this.dialogVisible2 = true;
    },
    async classfy3() {
      const { data: res } = await this.$http.get("n_article", {
        params: {
          type: 1,
          page: 1,
          limit: 10,
        },
      });
      console.log(res);
      this.classfyList3 = res.result.data;
      this.classcontent3 = res.result.data[2].content;
      // console.log(this.classfyList)
      this.dialogVisible3 = true;
    },
    // 监听页码的变化
    handleCurrentChange(newPage) {
      // console.log(newPage)
      this.noticeList.page = newPage;
      this.getinfoList();
    },
  },
};
</script>

<style lang="less">
// 导航部分
.top {
  display: flex;
  position: fixed;
  padding-left: 162px;
  height: 80px;
  width: 100%;
  background-color: #37be71;
  overflow: hidden;
  z-index: 888;
}
.h-left {
  font-weight: 600;
  padding-top: 5px;
  margin-left: -2px;
  .h-l-t {
    width: 400px;
    height: 36px;
    display: flex;
    line-height: 36px;
    img {
      width: 36px;
      height: 36px;
    }
    .title {
      font-size: 20px;
      font-family: Avenir, Helvetica, Arial, sans-serif;
      color: #fff;
      margin: 0 10px;
      letter-spacing: 2px;
    }
  }
  .h-l-b {
    width: 400px;
    font-size: 22px;
    color: #fff;
    letter-spacing: 3px;
    line-height: 35px;
  }
}

.h-right {
  letter-spacing: 2px;
  ul {
    width: 800px;
    height: 58px;
    margin-left: 1px;
    // background: orange;
    box-sizing: border-box;
    display: flex;
    justify-content: flex-end;
    a {
      text-decoration: none;
    }
    li {
      display: list-item;
      width: 120px;
      height: 100%;
      line-height: 58px;
      text-align: center;
      list-style-type: none;
      cursor: pointer;
      margin: 2px 0 0px 0.5px;
      color: #fff;
      font-size: 18px;
    }
    li :hover {
      background: url()
        center 43px no-repeat;
    }
    .active {
      background: url()
        center 43px no-repeat;
    }
  }
}
// 登录界面
#homes {
  display: flex;
  display: flex;
  justify-content: center;
  box-sizing: border-box;
  /* padding-top: 175px; */
  height: 780px;
  width: 100%;
  background-size: 100% 100%;
  background: url(https://repair-h.oss-cn-shenzhen.aliyuncs.com/banner.png) 0 0
    no-repeat;
}
.banner-left {
  position: relative;
  width: 600px;
  height: 700px;
  top: 77px;
  transform: translate(-3px, 3px);
  .banner-l-t {
    width: 585px;
    height: 131.2px;
    color: #4ffff4;
    font-size: 50px;
    font-weight: 600;
    letter-spacing: 4px;
  }
  .banner-l-b {
    position: relative;
    top: 43.5px;
    right: 7.5px;
    img {
      width: 509px;
      height: 392px;
    }
  }
}

.banner-right {
  position: relative;
  top: 76px;
  transform: translate(-5.5px, 19px);
  width: 563px;
  height: 488px;
  background: url(https://repair-h.oss-cn-shenzhen.aliyuncs.com/Signin_bg.png) 0
    0 no-repeat;
  .login {
    .login-top {
      display: flex;
      text-align: center;
      border-bottom: 1px solid rgba(133, 255, 239, 0.2);
      p {
        margin: 10px 0 0 0;
        letter-spacing: 5px;
        line-height: 70px;
        width: 281.5px;
        height: 70px;
        color: #6ff3a8;
        font-size: 24px;
      }
      .tx {
        background: url()
          center 62px no-repeat;
      }
    }
  }
}

.login-main {
  padding: 40px 60px;
  .ipt1 {
    width: 443px;
    height: 105px;
    img {
      position: absolute;
      z-index: 66;
      margin: 17px 0 0 10px;
    }
    input {
      position: relative;
      width: 100%;
      height: 60px;
      box-sizing: border-box;
      padding: 0 15px 0 40px;
      border: 2px solid #38bf72;
      background-color: #12743f;
      color: #fffefd;
      font-size: 16px;
      letter-spacing: 2px;
    }
  }
  .ipt2 {
    width: 443px;
    height: 105px;
    img {
      position: absolute;
      z-index: 66;
      margin: 17px 0 0 10px;
    }
    input {
      position: relative;
      width: 100%;
      height: 60px;
      box-sizing: border-box;
      padding: 0 15px 0 40px;
      border: 2px solid #38bf72;
      background-color: #12743f;
      color: #fffefd;
      font-size: 16px;
      letter-spacing: 2px;
    }
  }
  .ipt3 {
    width: 443px;
    height: 105px;
    img {
      position: absolute;
      z-index: 66;
      margin: 17px 0 0 10px;
    }
    input {
      position: relative;
      width: 100%;
      height: 60px;
      box-sizing: border-box;
      padding: 0 15px 0 40px;
      border: 2px solid #38bf72;
      background-color: #12743f;
      color: #fffefd;
      font-size: 16px;
      letter-spacing: 2px;
    }
  }
  .ipt4 {
    width: 443px;
    height: 105px;
    display: flex;
    img {
      position: absolute;
      z-index: 66;
      margin: 17px 0 0 10px;
    }
    input {
      position: relative;
      width: 100%;
      height: 60px;
      box-sizing: border-box;
      padding: 0 15px 0 40px;
      border: 2px solid #38bf72;
      background-color: #12743f;
      color: #fffefd;
      font-size: 16px;
      letter-spacing: 2px;
    }
    button {
      width: 127px;
      height: 40px;
      text-align: center;
      line-height: 40px;
      color: #fff;
      cursor: pointer;
      background-color: #37be71;
      border-radius: 20px;
      font-size: 12px;
      letter-spacing: 0;
      margin: 10px 0 0 10px;
    }
  }
  button {
    width: 100%;
    height: 50px;
    letter-spacing: 8px;
    font-size: 20px;
    margin-top: 10px;
    border: none;
    background-color: #32af08;
    color: #fff;
  }
  .sign {
    width: 443px;
    height: 60px;
    color: #fffffd;
    text-align: right;
    line-height: 60px;
    font-size: 16px;
    cursor: pointer;
  }
}

// 作品介绍
#productions {
  width: 100%;
  height: 703px;
  .productions-introduce {
    padding-top: 38px;
    h3 {
      letter-spacing: 8px;
      font-size: 40px;
      width: 540px;
      height: 122px;
      text-align: center;
      line-height: 122px;
      color: #fff;
      font-weight: 500;
      margin: 0 auto;
      background: url(https://repair-h.oss-cn-shenzhen.aliyuncs.com/title.png) 0
        0 no-repeat;
    }
  }
  .production {
    width: 910px;
    margin: 75px auto 0;
    padding: 0;
    .swp {
      width: 100%;
      position: relative;
      height: 100%;
      margin-left: auto;
      margin-right: auto;
      overflow: hidden;
      .swiper-wrapper {
        position: relative;
        width: 100%;
        height: 100%;
        z-index: 1;
        display: flex;
        transition-property: transform;
        box-sizing: content-box;
        .swiper-slide {
          // 表示所有属性都有动作效果，过度时间为0.4s，以慢速开始和结束的过渡效果
          transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
          width: 290px !important;
          height: 330px;
          padding: 20px 25px;
          box-sizing: border-box;
          margin-right: 20px;
          box-shadow: 1px 0 35px 0 #b9c7d7;
          // transform: scale(0.75) !important;
          transition: 1s;
          flex-shrink: 0;
          cursor: pointer;
          .pro_pic {
            margin: 20px 0;
            text-align: center;
          }
          h3 {
            line-height: 60px;
            margin: 20 auto;
            text-align: center;
            border-bottom: 1px solid #ddd;
          }
          .bot-name {
            display: flex;
            height: 50px;
            line-height: 50px;
            h4 {
              margin: 0;
              padding: 0;
              font-size: 18px;
              color: #3e3a39;
            }
            img {
              width: 27px;
              height: 27px;
              margin: 11px 13px 11px 0;
            }
          }
          .bot-school {
            display: flex;
            width: 240px;
            height: 40px;
            font-size: 15px;
            line-height: 40px;
            color: #a0a0a0;
            .school {
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
            span {
              margin: 0 5px;
            }
            .pro-type {
              width: 100px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
          }
        }
      }
    }
  }
}

// 大赛简介部分
#intro {
  .intro {
    .intro-content {
      position: relative;
      margin: 45px auto 0;
      width: 1120px;
      height: 720px;
      background: #fff;
      box-sizing: border-box;
      padding: 160px 70px 60px 70px;
      box-shadow: 0 0 20px 15px #f4f4f4;
      border: 1px solid #f4f4f4;
      .intro-title {
        position: absolute;
        left: -48px;
        top: -105px;
        p {
          margin: 0;
          font-variant: small-caps;
          font-size: 60px;
          color: #37be71;
        }
        .title2 {
          font-size: 50px;
        }
        h3 {
          margin: 0;
          color: #323947;
          font-size: 48px;
          font-weight: 600;
          // margin: 0;
        }
      }
      img {
        position: absolute;
        right: 70px;
        top: -102px;
      }
      .tab {
        p {
          margin: 0;
          white-space: pre-wrap;
          background-color: #fff;
          font-family: "Microsoft YaHei";
          font-size: 16px;
          color: rgb(63, 63, 63);
          line-height: 1.5em;
        }
        .second {
          text-indent: 2em;
        }
      }
    }
  }
}

// 大赛分类
#classy {
  .classy {
    background: url(https://repair-h.oss-cn-shenzhen.aliyuncs.com/fl_bg.png) 50%
      no-repeat;
    width: 100%;
    height: 702px;
    margin-top: 115px;
    padding-top: 95px;
    box-sizing: border-box;
    .content {
      width: 1200px;
      height: 500px;
      margin: 0 auto 0;
      position: relative;
      padding: 2px;
      box-sizing: border-box;
      .title {
        position: relative;
        top: -145px;
        width: 100%;
        h3 {
          letter-spacing: 8px;
          font-size: 40px;
          width: 540px;
          height: 122px;
          text-align: center;
          line-height: 122px;
          color: #fff;
          font-weight: 500;
          margin: 0 auto;
          background: url(https://repair-h.oss-cn-shenzhen.aliyuncs.com/title.png)
            0 0 no-repeat;
        }
      }
      .contentList {
        margin: 65px 40px 0;
        ul {
          list-style: none;
          display: flex;
          flex-direction: row;
          li {
            flex: 1;
            text-align: center;
            color: #fff;
            img {
              cursor: pointer;
            }
            p {
              line-height: 100px;
              font-size: 24px;
              letter-spacing: 4px;
            }
          }
        }
      }
    }
  }
}

// 大赛公告
#explain {
  .explain {
    margin-top: 123px;
    .explain-content {
      width: 1120px;
      min-height: 600px;
      box-sizing: border-box;
      padding: 107px 52px 46px 57px;
      background: #fff;
      box-shadow: 0 0 20px 15px #f4f4f4;
      border: 1px solid #f4f4f4;
      position: relative;
      margin: 45px auto 0;
      .explain-title {
        position: absolute;
        top: -50px;
        left: -150px;
        letter-spacing: 8px;
        font-size: 40px;
        width: 540px;
        height: 122px;
        text-align: center;
        line-height: 122px;
        color: #fff;
        font-weight: 500;
        margin: 0 auto;
        background: url(https://repair-h.oss-cn-shenzhen.aliyuncs.com/title.png)
          0 0 no-repeat;
      }
      .e-tab {
        list-style: none;
        display: flex;
        flex-direction: row;
        width: 100%;
        li {
          color: #a0a0a0;
          flex: 1;
          background: #f6f7fa;
          height: 72px;
          padding: 15px 0;
          line-height: 42px;
          box-sizing: border-box;
          text-align: center;
          font-weight: 600;
          cursor: pointer;
          letter-spacing: 2px;
          font-size: 20px;
          margin: 0;
          border-bottom: 2px solid #dedede;
        }
      }
      .e-tab :hover {
        border-top: 6px solid #37be71;
        border-bottom: none;
        background-color: #fff;
        color: #37be71;
      }
      .act {
        border-top: 6px solid #37be71;
        border-bottom: none !important;
        background-color: #fff;
        color: #37be71;
      }
      .e-tab-content {
        .tab-content {
          .tab-contentList {
            list-style: none;
            overflow: hidden;
            height: 430px;
            a {
              text-decoration: none;
            }
            .content-list {
              display: flex;
              // height: 85px;
              cursor: pointer;
              color: #3a3e39;
              font-size: 18px;
              border-bottom: 1px solid #ddd;
              line-height: 85px;
              img {
                width: 30px;
                height: 30px;
                margin: 22px 20px 0 0;
              }
            }
          }
        }
      }
    }
  }
}

// 基地介绍
#introduce {
  .introduce {
    height: 100%;
    padding-top: 63px;
    .introduce-content {
      width: 1200px;
      box-sizing: border-box;
      padding-top: 105px;
      position: relative;
      margin: 45px auto 0;
      .introduce-title {
        position: absolute;
        width: 100%;
        left: 0;
        top: -25px;
        h3 {
          letter-spacing: 8px;
          font-size: 40px;
          width: 540px;
          height: 122px;
          text-align: center;
          line-height: 122px;
          color: #fff;
          font-weight: 500;
          margin: 0 auto;
          background: url(https://repair-h.oss-cn-shenzhen.aliyuncs.com/title.png)
            0 0 no-repeat;
        }
      }
      .image_video {
        video {
          width: 1200px;
          height: 500px;
          margin: 0 auto;
        }
      }
    }
  }
}

// 结尾foot部分
#foot {
  .foot {
    width: 100%;
    height: 440px;
    margin: 90px 0 0;
    box-sizing: border-box;
    background-color: #33343f;
    background-size: 100% 100%;
    background: url(http://www.cquptpjs.com/img/bottom_bg.30051fc1.png) 0 0
      no-repeat;
    .foot_content {
      width: 1200px;
      height: 100%;
      margin: 0 auto;
      padding: 58px 0;
      box-sizing: border-box;
      color: #fff;
      display: flex;
      flex-direction: row;
      // 左边logo样式
      .foot_logo {
        text-align: center;
        width: 400px;
        height: 274px;
        margin: 25px 0;
        .logo_top {
          img {
            width: 138px;
            height: 138px;
          }
        }
        .logo_bot {
          margin-top: 35px;
          img {
            width: 254px;
            height: 68px;
          }
        }
      }

      // 中间文字
      .foot_content {
        width: 400px;
        height: 174px;
        margin: 75px 0;
        box-sizing: border-box;
        padding: 0;
        ul {
          list-style: none;
          li {
            display: flex;
            flex-direction: row;
            line-height: 80px;
            letter-spacing: 0;
            font-size: 18px;
          }
        }
      }
      // 右边二维码
      .foot_wechart {
        width: 400px;
        height: 324px;
        .wechart {
          width: 263px;
          height: 263px;
          margin: 0 auto;
          background-color: #cdcdcd;
          img {
            width: 100%;
            height: 100%;
          }
        }
        p {
          width: 263px;
          margin: 25px auto 0;
          text-align: center;
          letter-spacing: 3px;
          font-size: 18px;
        }
      }
    }
  }
}
</style>